<template>
  <div class="container">
    <div class="bg">
      <div class="title">
        <el-button type="success" icon="el-icon-edit">新增试题</el-button>
      </div>
      <div class="search">
        <el-form :inline="true" class="demo-form-inline">
          <el-row :gutter="20" justify="end" type="flex">
            <el-col :span="6">
              <el-form-item label="学科">
                <el-select
                  placeholder="请选择活动区域"
                  v-model="user.subjectID"
                  @change="dbtn"
                >
                  <el-option
                    label="无数据"
                    value=""
                    v-if="subject.length == 0"
                    v-model="user.subjectID"
                  ></el-option>
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="(item, index) in subject"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select
                  placeholder="请选择活动区域"
                  v-model="user.catalogID"
                >
                  <el-option
                    label="无数据"
                    value=""
                    v-if="subject.length == 0"
                    v-model="user.subjectID"
                  ></el-option>
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="(item, index) in direction"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签">
                <el-select placeholder="请选择活动区域" v-model="user.tags">
                  <el-option
                    label="无数据"
                    value=""
                    v-if="subject.length == 0"
                    v-model="user.subjectID"
                  ></el-option>
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="(item, index) in tags"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input
                  placeholder="审批人"
                  v-model="user.keyword"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" type="flex" justify="end">
            <el-col :span="6">
              <el-form-item label="试题类型">
                <el-select
                  placeholder="请选择活动区域"
                  v-model="user.questionType"
                >
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="(item, index) in questionType"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="难度">
                <el-select
                  placeholder="请选择活动区域"
                  v-model="user.difficulty"
                >
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="(item, index) in difficulty"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方向">
                <el-select
                  placeholder="请选择活动区域"
                  v-model="user.direction"
                >
                  <el-option
                    :label="item"
                    :value="item"
                    v-for="(item, index) in direction1"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="录入人">
                <el-select
                  placeholder="请选择活动区域"
                  v-model="user.creatorID"
                >
                  <el-option label="超级管理员" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" justify="end" type="flex">
            <el-col :span="6">
              <el-form-item label="题目备注">
                <el-input
                  placeholder="审批人"
                  v-model="user.remarks"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称">
                <el-input
                  placeholder="审批人"
                  v-model="user.shortName"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="城市">
                <el-select
                  placeholder="请选择"
                  style="width: 100px"
                  v-model="user.province"
                >
                  <el-option
                    :label="item"
                    :value="item"
                    v-for="(item, index) in provinces"
                    :key="index"
                  ></el-option>
                </el-select>
                <el-select
                  style="width: 100px; margin-left: 20px"
                  placeholder="请选择"
                  v-model="user.city"
                >
                  <el-option
                    :label="item"
                    :value="item"
                    v-for="(item, index) in Arrcity"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" class="button">
              <el-button size="mini" style="height: 35px" @click="removeBtn"
                >清除</el-button
              >
              <el-button
                type="primary"
                size="mini"
                style="height: 35px"
                @click="addBtn"
                >搜索</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="shenti">
        <el-tabs v-model="activeName" type="card" @tab-click='qiehuang1'>
          <el-tab-pane label="全部" name="first">
             <el-alert :title="`数据一共${counts}条`" type="info" show-icon></el-alert>
            <el-table :data="list" border style="width: 100%">
              <el-table-column prop="number" label="试题编号" width="150">
              </el-table-column>
              <el-table-column prop="subject" label="学科" width="150">
              </el-table-column>
              <el-table-column prop="catalog" label="目录" width="150">
              </el-table-column>
              <el-table-column label="题型" width="150">
                <template slot-scope="{row}">
                      <span>{{getDiffculty(row.questionType)}}</span>
                </template>
              </el-table-column>
              <el-table-column label="题干" width="150">
                <template slot-scope="{row}">
                  <p v-html="row.question"></p>
                </template>
              </el-table-column>
              <el-table-column label="录入时间" width="170">
                <template slot-scope="{ row }">
                <div>
                  {{ row.addDate | parseTimeByString }}
                </div>
              </template>
              </el-table-column>
              <el-table-column label="难度" width="150">
                <template slot-scope="{row}">
                      <span>{{getDocument(row.difficulty)}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="creator" label="录入人" width="120">
              </el-table-column>
              <el-table-column label="审核状态" width="150">
                <template slot-scope="{row}">
                      <span>{{checkType(row.chkState)}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="chkRemarks" label="审核意见" width="120">
              </el-table-column>
              <el-table-column  label="发布状态" width="120">
                 <template slot-scope="{row}">
                      <span>{{publishType1(row.publishState)}}</span>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="300">
                <template slot-scope="{row}">
                  <el-button type="text" @click="chakan(row)">阅览</el-button>
                  <el-button type="text" :disabled='row.chkState===0 ? false : true' @click="chakan1(row)">审核</el-button>
                  <el-button type="text" :disabled='row.publishState==1'>修改</el-button>
                  <el-button type="text" @click="shangjia(row)" >{{row.publishState===0?'上架':'下架'}}</el-button>
                  <el-button type="text" @click="remove(row)" :disabled='row.publishState==1'>删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="fenye">
            <el-pagination
              :total="counts"
              layout="prev,pager,next,sizes,jumper"
              @next-click="nextPage3"
              @prev-click='prevPage3'
              @size-change='change3'
              @current-change='current3'
            >
            </el-pagination>
          </div>
          </el-tab-pane>
          <el-tab-pane label="待审核" name="second">

                <el-alert :title="`数据一共${counts}条`" type="info" show-icon></el-alert>
            <el-table :data="list" border style="width: 100%">
              <el-table-column prop="number" label="试题编号" width="150">
              </el-table-column>
              <el-table-column prop="subject" label="学科" width="150">
              </el-table-column>
              <el-table-column prop="catalog" label="目录" width="150">
              </el-table-column>
              <el-table-column label="题型" width="150">
                <template slot-scope="{row}">
                      <span>{{getDiffculty(row.questionType)}}</span>
                </template>
              </el-table-column>
              <el-table-column label="题干" width="150">
                <template slot-scope="{row}">
                  <p v-html="row.question"></p>
                </template>
              </el-table-column>
              <el-table-column label="录入时间" width="170">
                <template slot-scope="{ row }">
                <div>
                  {{ row.addDate | parseTimeByString }}
                </div>
              </template>
              </el-table-column>
              <el-table-column label="难度" width="150">
                <template slot-scope="{row}">
                      <span>{{getDocument(row.difficulty)}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="creator" label="录入人" width="120">
              </el-table-column>
              <el-table-column label="审核状态" width="150">
                <template slot-scope="{row}">
                      <span>{{checkType(row.chkState)}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="chkRemarks" label="审核意见" width="120">
              </el-table-column>
              <el-table-column  label="发布状态" width="120">
                 <template slot-scope="{row}">
                      <span>{{publishType1(row.publishState)}}</span>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="300">
                <template slot-scope="{row}">
                  <el-button type="text" @click="chakan(row)">阅览</el-button>
                  <el-button type="text" :disabled='row.chkState===0 ? false : true' @click="chakan1(row)">审核</el-button>
                  <el-button type="text" :disabled='row.publishState==1'>修改</el-button>
                  <el-button type="text" @click="shangjia(row)" >{{row.publishState===0?'上架':'下架'}}</el-button>
                  <el-button type="text" @click="remove(row)" :disabled='row.publishState==1'>删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="fenye">
            <el-pagination
              :total="counts"
              layout="prev,pager,next,sizes,jumper"
              @next-click="nextPage3"
              @prev-click='prevPage3'
              @size-change='change3'
              @current-change='current3'
            >
            </el-pagination>
          </div>




          </el-tab-pane>
          <el-tab-pane label="已审核" name="third">

                 <el-alert :title="`数据一共${counts}条`" type="info" show-icon></el-alert>
            <el-table :data="list" border style="width: 100%">
              <el-table-column prop="number" label="试题编号" width="150">
              </el-table-column>
              <el-table-column prop="subject" label="学科" width="150">
              </el-table-column>
              <el-table-column prop="catalog" label="目录" width="150">
              </el-table-column>
              <el-table-column label="题型" width="150">
                <template slot-scope="{row}">
                      <span>{{getDiffculty(row.questionType)}}</span>
                </template>
              </el-table-column>
              <el-table-column label="题干" width="150">
                <template slot-scope="{row}">
                  <p v-html="row.question"></p>
                </template>
              </el-table-column>
              <el-table-column label="录入时间" width="170">
                <template slot-scope="{ row }">
                <div>
                  {{ row.addDate | parseTimeByString }}
                </div>
              </template>
              </el-table-column>
              <el-table-column label="难度" width="150">
                <template slot-scope="{row}">
                      <span>{{getDocument(row.difficulty)}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="creator" label="录入人" width="120">
              </el-table-column>
              <el-table-column label="审核状态" width="150">
                <template slot-scope="{row}">
                      <span>{{checkType(row.chkState)}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="chkRemarks" label="审核意见" width="120">
              </el-table-column>
              <el-table-column  label="发布状态" width="120">
                 <template slot-scope="{row}">
                      <span>{{publishType1(row.publishState)}}</span>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="300">
                <template slot-scope="{row}">
                  <el-button type="text" @click="chakan(row)">阅览</el-button>
                  <el-button type="text" :disabled='row.chkState===0 ? false : true' @click="chakan1(row)">审核</el-button>
                  <el-button type="text" :disabled='row.publishState==1'>修改</el-button>
                  <el-button type="text" @click="shangjia(row)" >{{row.publishState===0?'上架':'下架'}}</el-button>
                  <el-button type="text" @click="remove(row)" :disabled='row.publishState==1'>删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="fenye">
            <el-pagination
              :total="counts"
              layout="prev,pager,next,sizes,jumper"
              @next-click="nextPage3"
              @prev-click='prevPage3'
              @size-change='change3'
              @current-change='current3'
            >
            </el-pagination>
          </div>


          </el-tab-pane>
          <el-tab-pane label="已拒绝" name="fourth">

                <el-alert :title="`数据一共${counts}条`" type="info" show-icon></el-alert>
            <el-table :data="list" border style="width: 100%">
              <el-table-column prop="number" label="试题编号" width="150">
              </el-table-column>
              <el-table-column prop="subject" label="学科" width="150">
              </el-table-column>
              <el-table-column prop="catalog" label="目录" width="150">
              </el-table-column>
              <el-table-column label="题型" width="150">
                <template slot-scope="{row}">
                      <span>{{getDiffculty(row.questionType)}}</span>
                </template>
              </el-table-column>
              <el-table-column label="题干" width="150">
                <template slot-scope="{row}">
                  <p v-html="row.question"></p>
                </template>
              </el-table-column>
              <el-table-column label="录入时间" width="170">
                <template slot-scope="{ row }">
                <div>
                  {{ row.addDate | parseTimeByString }}
                </div>
              </template>
              </el-table-column>
              <el-table-column label="难度" width="150">
                <template slot-scope="{row}">
                      <span>{{getDocument(row.difficulty)}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="creator" label="录入人" width="120">
              </el-table-column>
              <el-table-column label="审核状态" width="150">
                <template slot-scope="{row}">
                      <span>{{checkType(row.chkState)}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="chkRemarks" label="审核意见" width="120">
              </el-table-column>
              <el-table-column  label="发布状态" width="120">
                 <template slot-scope="{row}">
                      <span>{{publishType1(row.publishState)}}</span>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="300">
                <template slot-scope="{row}">
                  <el-button type="text" @click="chakan(row)">阅览</el-button>
                  <el-button type="text" :disabled='row.chkState===0 ? false : true' @click="chakan1(row)">审核</el-button>
                  <el-button type="text" :disabled='row.publishState==1'>修改</el-button>
                  <el-button type="text" @click="shangjia(row)" >{{row.publishState===0?'上架':'下架'}}</el-button>
                  <el-button type="text" @click="remove(row)" :disabled='row.publishState==1'>删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="fenye">
            <el-pagination
              :total="counts"
              layout="prev,pager,next,sizes,jumper"
              @next-click="nextPage3"
              @prev-click='prevPage3'
              @size-change='change3'
              @current-change='current3'
            >
            </el-pagination>
          </div>

          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
     <el-dialog
        title="题目预览"
        :visible.sync="dialogVisible"
        width="80%"
        height='80%'
        v-if="dialogVisible"
      >
        <questionsCheck :data='row'/>
      </el-dialog>
      <el-dialog
        title="题目预览"
        :visible.sync="dialogVisible1"
        width="40%"
        height='40%'
        v-if="dialogVisible1"
      >
        <questionsPreview :row='row' @update='change'/>
      </el-dialog>
  </div>
</template>

<script>
import { simpleApi } from "@/api/hmmm/subjects.js";
import { simple1 } from "@/api/hmmm/directorys.js";
import { simple2 } from "@/api/hmmm/tags.js";
import { provinces, citys } from "@/api/hmmm/citys.js";
import { questionType, difficulty, direction,chkType} from "@/api/hmmm/constants.js";
import { choice,choicePublish,remove} from "@/api/hmmm/questions.js";
import questionsCheck from "@/module-hmmm/components/questions-check";
import questionsPreview from '@/module-hmmm/components/questions-preview'

export default {
  data() {
    return {
      user: {
        // subjectID: "",
        // difficulty: "",
        // questionType: "",
        // tags: "",
        // province: "",
        // city: "",
        // keyword: "",
        // remarks: "",
        // shortName: "",
        // direction: "",
        page: 1,
        pagesize: 5,
        // catalogID: "",
        // creatorID: "",
      },
      subject: "",
      tags: [],
      direction: [],
      questionType: [],
      difficulty: [],
      direction1: [],
      provinces: [],
      activeName: 'first',
      list: [],
      dialogVisible:false,
      dialogVisible1:false,
      row:{},
      publishType:[
  {
    value: 0,
    label: '待发布'
  },
  {
    value: 1,
    label: '已发布'
  },
  {
    value: 2,
    label: '已下架'
  }
],
  chkState:'',
  counts:''
    };
  },
  components: {
    questionsCheck,
    questionsPreview
  },
  async created() {
    const res = await simpleApi();
    this.subject = res.data;
    this.questionType = questionType;
    this.difficulty = difficulty;
    this.direction1 = direction;
    this.provinces = provinces();
    this.getDate()
    console.log(this.list);
  },
  computed: {
    Arrcity() {
      return citys(this.user.province);
    },
  },
  methods: {

    async getDate() {
      const res2 = await choice(this.user);
      this.list = res2.data.items;
      this.counts = res2.data.counts;
      this.pages=res2.data.pages
    },
    async dbtn() {
      const res = await simple1(this.user.subjectID);
      const res2 = await simple2(this.user.subjectID);
      this.tags = res2.data;
      this.direction = res.data;
    },
    removeBtn() {
      this.user = {};
    },
    addBtn() {
      console.log(this.user);
      this.getDate();
    },
    getDiffculty(item1) {
      questionType.forEach((item) => {
        if (item.value == item1) {
          item1 = item.label;
        }
      });
      return item1;
    },
    getDocument(item1) {
      difficulty.forEach((item) => {
        if (item.value == item1) {
          item1 = item.label;
        }
      });
      return item1;
    },
    checkType(item1) {
      chkType.forEach((item) => {
        if (item.value == item1) {
          item1 = item.label;
        }
      });
      return item1;
    },
    publishType1(item1) {
      this.publishType.forEach((item) => {
        if (item.value == item1) {
          item1 = item.label;
        }
      });
      return item1;
    },
    chakan(row){
      this.row=row
      this.dialogVisible=true
    },
    chakan1(row){
      this.row=row
      this.dialogVisible1=true
    },
    shangjia(row) {
      this.$confirm("你确定是否进行此操作吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const a={
            id:row.id,
            publishState:row.publishState ===0?1:0
          }
          let res = await choicePublish(a);
          console.log(res);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.getDate();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "操作失败",
          });
        });
    },
    remove(row){
      this.$confirm('你确定是否进行此操作吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          await remove(row)
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          this.getDate()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '操作失败'
          });
        });

    },
    change(){
      console.log(1);
      this.dialogVisible1=false
      this.getDate()
    },
    qiehuang1(res){
      // console.log(res.index);
      if(res.index==0){
          this.user.chkState=''
      }
      if(res.index==1){
          this.user.chkState=0
      }
      if(res.index==2){
          this.user.chkState=1
      }
      if(res.index==3){
          this.user.chkState=3
      }
      this.getDate()
    },
    nextPage3(){
      this.user.page++
      this.getDate()
    },
    prevPage3(){
      this.user.page--
      this.getDate()
    },
    change3(res){
      this.user.pagesize=res
      this.getDate()
    },
    current3(res){
      this.user.page=res
      this.getDate()
    },

  },
};
</script>

<style scoped lang='less'>
.container {
  padding: 10px;
  .bg {
    background: #ffffff;
    padding: 20px;
    height: 1000px;
    .title {
      height: 40px;
      width: 100%;
      display: flex;
      justify-content: end;
    }
    .search {
      width: 100%;
      height: 150px;
      margin-top: 15px;
    }
    .button {
      display: flex;
      justify-content: end;
      font-size: 8px;
    }
    .shenti {
      margin-top: 20px;
    }
  }
   .fenye {
    margin-top: 10px;
    display: flex;
    justify-content: end;
  }
}
</style>

